<template>
    <div class="m-login-body">
        <div class="title">百生后台管理系统</div>
        <div class="m-login-box">
            <Form ref="formInline" :model="formInline" :rules="ruleInline">
                <FormItem prop="user">
                    <Input type="text" size="large" v-model="formInline.account" placeholder="账户">
                    <Icon size="20" type="ios-person-outline" slot="prepend"></Icon>
                    </Input>
                </FormItem>
                <FormItem prop="password">
                    <Input type="password" size="large" v-model="formInline.password" placeholder="密码">
                    <Icon size="20" type="ios-locked-outline" slot="prepend"></Icon>
                    </Input>
                </FormItem>
                <FormItem>
                    <Button class="m-login-button" size="large" type="primary" @click="handleSubmit('formInline')" @keyup.enter="handleSubmit('formInline')">登录</Button>
                </FormItem>
            </Form>
        </div>
    </div>
</template>
<script>
    import API from '../../config/api'
    import {setCookie,delCookie,removeStore} from '../../config/utils'
    import { JSEncrypt } from 'jsencrypt'
    import qs from 'qs'
    export default {
        data () {
            return {
                formInline: {
                    account:'',
                    password: '',
                    token:'',
                },
                ruleInline: {
                    account: [
                        { required: true, message: '请填写用户名', trigger: 'blur' },
                        { type: 'string', min: 1, message: '账户名不能为空', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请填写密码', trigger: 'blur' },
                        { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
                    ]
                },
                userData:null,
                src:null
            }
        },
        methods: {
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.submitFn();
                    } else {
                        this.$Message.error('请完善信息!');
                    }
                })
            },
            show(){
                this.handleSubmit('formInline');
             },
            submitFn(){
                let vm = this;
                delCookie('userInfo');
                this.getPublicKey()
                // vm.$router.push({name:'articleIndex'})
                // this.axios.post(API.LOGIN,qs.stringify(vm.formInline)).then(response => {
                //     //console.log(response)
                //     if(response.data.code ===1){
                //         vm.userData = response.data.data;
                //         vm.$store.commit('setUserData',vm.userData);
                //         setCookie('userInfo',JSON.stringify(vm.userData));
                //         removeStore('breadCrumb');
                //         vm.$router.push({name:'System'})
                //     }else {
                //         this.$Message.error(response.data.msg);
                //         this.loadImg();//
                //     }
                // }, response => {
                //     this.$Message.error('网络异常!');
                // })
            },
            login(psw){
                let params = {
                    username: this.formInline.account,
                    password: psw
                };
                params = qs.stringify(params);
                this.axios.post(API.LOGIN, params).then(res=>{
                    let data = res.data;
                    if (data.code == 200){
                        this.$store.commit('setUserData',data.data);
                        setCookie('userInfo',JSON.stringify(data.data));
                        this.$router.push({name:'articleIndex'})
                    } else{
                        this.$Message.error(data.msg)
                    }
                })
            },
            getPublicKey(){
                this.axios.post(API.GET_PUBLIC_KEY).then(res=>{
                    let data = res.data;
                    if (data.code == 200){
                        const entry=new JSEncrypt();
                        entry.setPublicKey(data.data);
                        const pwd= entry.encrypt(this.formInline.password);
                        this.login(pwd)
                    }
                })
            }
        },

        mounted(){
        }
    }
</script>
<style lang="scss" scoped>
    .title{
        text-align: center;
        font-size: 35px;
        font-weight: bold;
        color:#FFFFFF;
        margin-top: 80px;
    }
   .m-login-body {
       position: absolute;
       width: 100%;
       height: 100%;
       background-image: url("https://file.iviewui.com/dist/ddb81d457e66ab31d3a2e7726a5b793a.png");
   }
    .m-login-box {
        position: absolute;
        left: 0;
        right: 0;
        top:0;
        bottom: 0;
        margin: auto;
        width: 250px;
        height: 300px;
    }
    .m-login-button {
        width: 250px;
    }
    .m-login-versify {
        position: absolute;
        right: 0px;
        top: 1px;
        img {
            height: 35px;
            display: block;
            border-radius: 3px;
            float: left;
            margin-right: 20px;
        }
    }

</style>
